<template>
  <div
    class="hotel-admin-profile min-h-screen bg-gray-50 dark:bg-gray-900"
    :class="{ dark: isDark }"
  >
    <!-- 页面头部 -->
    <div
      class="profile-header bg-white dark:bg-gray-800 shadow-sm relative w-full"
    >
      <!-- 用户信息容器 -->
      <div class="container mx-auto px-4 py-4 relative max-w-7xl w-full">
        <div class="header-content relative rounded-lg overflow-hidden">
          <div
            class="header-bg bg-cover bg-center"
            :style="{
              backgroundImage: `url(${userInfo.coverImage || '/images/default-cover.jpg'})`,
            }"
          ></div>

          <!-- 操作按钮组 -->
          <div
            class="absolute right-4 top-4 flex flex-col items-end space-y-4 z-20"
          >
            <el-button-group>
              <el-tooltip content="重置修改" placement="bottom">
                <el-button
                  plain
                  :icon="RefreshLeft"
                  class="btn-action hover:scale-105 transform transition-all"
                  @click="resetForm"
                >
                  重置
                </el-button>
              </el-tooltip>

              <el-tooltip content="保存修改" placement="bottom">
                <el-button
                  type="primary"
                  :icon="Check"
                  class="btn-action hover:scale-105 transform transition-all"
                  @click="handleSubmit"
                >
                  保存修改
                </el-button>
              </el-tooltip>
            </el-button-group>

            <el-tooltip content="更换封面图片" placement="bottom">
              <el-button
                type="primary"
                plain
                class="btn-cover hover:scale-105 transform transition-all duration-300"
                @click="handleUpdateCover"
              >
                <el-icon class="mr-1"><Upload /></el-icon>
                更换封面
              </el-button>
            </el-tooltip>
          </div>

          <div class="flex flex-wrap items-center relative z-10 px-6 py-4">
            <div class="relative group">
              <el-avatar
                :size="100"
                :src="userInfo.avatar"
                class="ring-4 ring-white dark:ring-gray-800 shadow-lg transform group-hover:scale-105 transition-transform duration-300"
              />
              <div
                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
              >
                <el-button
                  type="primary"
                  circle
                  class="update-avatar-btn"
                  @click="handleUpdateAvatar"
                >
                  <el-icon><Camera /></el-icon>
                </el-button>
              </div>
            </div>
            <div class="ml-4 flex-1">
              <h1 class="text-2xl font-bold text-white mb-1 drop-shadow-md">
                {{ userInfo.hotelName }}
              </h1>
              <p class="text-gray-200 drop-shadow">{{ userInfo.username }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container mx-auto px-4 py-8 max-w-7xl">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 左侧：基本信息 -->
        <div class="lg:col-span-2 space-y-6">
          <el-card>
            <template #header>
              <div class="flex items-center">
                <el-icon class="mr-2"><UserFilled /></el-icon>
                <span class="text-lg font-medium">基本信息</span>
              </div>
            </template>

            <el-form
              ref="formRef"
              :model="userInfo"
              :rules="rules"
              label-width="100px"
              class="max-w-3xl"
            >
              <el-form-item label="酒店名称" prop="hotelName">
                <el-input
                  v-model="userInfo.hotelName"
                  placeholder="请输入酒店名称"
                >
                  <template #prefix>
                    <el-icon><House /></el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="userInfo.phone" placeholder="请输入联系电话">
                  <template #prefix>
                    <el-icon><Phone /></el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="userInfo.email" placeholder="请输入电子邮箱">
                  <template #prefix>
                    <el-icon><Message /></el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="所在地区" prop="location">
                <el-cascader
                  v-model="userInfo.location"
                  :options="locationOptions"
                  placeholder="请选择所在地区"
                />
              </el-form-item>

              <el-form-item label="详细地址" prop="address">
                <el-input
                  v-model="userInfo.address"
                  placeholder="请输入详细地址"
                >
                  <template #prefix>
                    <el-icon><Location /></el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="个人简介" prop="bio">
                <el-input
                  v-model="userInfo.bio"
                  type="textarea"
                  :rows="4"
                  placeholder="介绍一下你的酒店特色..."
                  :maxlength="500"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item label="酒店标签">
                <el-select
                  v-model="userInfo.tags"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择或输入标签"
                  class="w-full"
                >
                  <el-option
                    v-for="tag in tagOptions"
                    :key="tag"
                    :label="tag"
                    :value="tag"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </el-card>

          <el-card>
            <template #header>
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <el-icon class="mr-2"><Picture /></el-icon>
                  <span class="text-lg font-medium">酒店图片</span>
                </div>
                <el-button type="primary" @click="handleAddImages">
                  <el-icon class="mr-1"><Plus /></el-icon>
                  添加图片
                </el-button>
              </div>
            </template>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
              <div
                v-for="(image, index) in userInfo.images"
                :key="index"
                class="relative group"
              >
                <el-image
                  :src="image.url"
                  fit="cover"
                  class="w-full aspect-square rounded-lg"
                />
                <div
                  class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center rounded-lg"
                >
                  <el-button
                    type="danger"
                    circle
                    @click="handleRemoveImage(index)"
                  >
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 右侧：账号信息和数据统计 -->
        <div class="space-y-6">
          <!-- 账号信息卡片 -->
          <el-card>
            <template #header>
              <div class="flex items-center">
                <el-icon class="mr-2"><InfoFilled /></el-icon>
                <span class="text-lg font-medium">账号信息</span>
              </div>
            </template>

            <div class="space-y-4">
              <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  账号ID
                </div>
                <div class="mt-1 font-medium">{{ userInfo.id }}</div>
              </div>

              <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  账号创建时间
                </div>
                <div class="mt-1 font-medium">
                  {{ formatDate(userInfo.createTime) }}
                </div>
              </div>

              <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  最后登录时间
                </div>
                <div class="mt-1 font-medium">
                  {{ formatDate(userInfo.lastLoginTime) }}
                </div>
              </div>

              <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <div class="text-sm text-gray-500 dark:text-gray-400">
                  账号状态
                </div>
                <div class="mt-1">
                  <el-tag
                    :type="userInfo.status === 'active' ? 'success' : 'danger'"
                    effect="dark"
                  >
                    {{ userInfo.status === "active" ? "正常" : "已禁用" }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 数据统计卡片 -->
          <el-card>
            <template #header>
              <div class="flex items-center">
                <el-icon class="mr-2"><DataLine /></el-icon>
                <span class="text-lg font-medium">数据统计</span>
              </div>
            </template>

            <div class="grid grid-cols-2 gap-4">
              <div
                class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div class="text-2xl font-bold text-primary-500">
                  {{ statistics.orderCount }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  总订单数
                </div>
              </div>

              <div
                class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div class="text-2xl font-bold text-primary-500">
                  {{ statistics.roomCount }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  房间数量
                </div>
              </div>

              <div
                class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div class="text-2xl font-bold text-primary-500">
                  {{ statistics.reviewCount }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  评价数量
                </div>
              </div>

              <div
                class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div class="text-2xl font-bold text-primary-500">
                  {{ statistics.rating }}
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  平均评分
                </div>
              </div>
            </div>
          </el-card>

          <!-- 认证信息卡片 -->
          <el-card>
            <template #header>
              <div class="flex items-center">
                <el-icon class="mr-2"><Check /></el-icon>
                <span class="text-lg font-medium">认证信息</span>
              </div>
            </template>

            <div class="space-y-4">
              <div
                class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div>
                  <div class="font-medium">实名认证</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    已完成身份认证
                  </div>
                </div>
                <el-tag type="success">已认证</el-tag>
              </div>

              <div
                class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div>
                  <div class="font-medium">营业执照</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    已上传营业执照
                  </div>
                </div>
                <el-tag type="success">已认证</el-tag>
              </div>

              <div
                class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div>
                  <div class="font-medium">经营许可</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    已上传相关证件
                  </div>
                </div>
                <el-tag type="success">已认证</el-tag>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 头像上传对话框 -->
    <el-dialog v-model="avatarDialogVisible" title="更换头像" width="500px">
      <el-upload
        class="avatar-uploader"
        action="/api/upload"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="tempAvatar" :src="tempAvatar" class="avatar-preview" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="avatarDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUpdateAvatar"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 图片上传对话框 -->
    <el-dialog v-model="imageDialogVisible" title="添加酒店图片" width="500px">
      <el-upload
        class="image-uploader"
        action="/api/upload"
        list-type="picture-card"
        :multiple="true"
        :limit="9"
        :on-success="handleImageSuccess"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="imageDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAddImages">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 使用全局图片编辑组件 -->
    <ImageEditor
      v-model="coverEditorVisible"
      :title="'编辑封面图片'"
      :upload-action="'/api/upload/cover'"
      :aspect-ratio="4"
      @success="handleCoverConfirm"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import ImageEditor from "@/components/common/ImageEditor.vue";
import {
  UserFilled,
  InfoFilled,
  House,
  Phone,
  Message,
  Location,
  Camera,
  Upload,
  Picture,
  Plus,
  Delete,
  Check,
  DataLine,
  RefreshLeft,
} from "@element-plus/icons-vue";
import { useThemeStore } from "@/stores/theme";

const formRef = ref(null);
const avatarDialogVisible = ref(false);
const imageDialogVisible = ref(false);
const tempAvatar = ref("");
const coverEditorVisible = ref(false);

const userInfo = ref({
  id: "HT10086",
  username: "",
  hotelName: "",
  avatar: "",
  coverImage: "",
  phone: "",
  email: "",
  bio: "",
  location: [],
  address: "",
  tags: [],
  images: [],
  createTime: "",
  lastLoginTime: "",
  status: "active",
});

const statistics = ref({
  orderCount: 1286,
  roomCount: 68,
  reviewCount: 526,
  rating: 4.8,
});

const locationOptions = [
  {
    value: "guangxi",
    label: "广西",
    children: [
      {
        value: "guigang",
        label: "贵港",
        children: [
          { value: "gangbei", label: "港北区" },
          { value: "gangnan", label: "港南区" },
          { value: "qintang", label: "覃塘区" },
          { value: "guiping", label: "桂平市" },
          { value: "pingnan", label: "平南县" },
        ],
      },
    ],
  },
];

const tagOptions = [
  "商务酒店",
  "度假酒店",
  "经济型",
  "豪华型",
  "亲子酒店",
  "温泉酒店",
  "WiFi覆盖",
  "免费停车",
  "健身房",
  "游泳池",
  "会议室",
  "餐厅",
];

const rules = {
  hotelName: [
    { required: true, message: "请输入酒店名称", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入电子邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
  ],
  location: [{ required: true, message: "请选择所在地区", trigger: "change" }],
  address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
};

const themeStore = useThemeStore();
const isDark = computed(() => themeStore.isDark);

// 监听主题变化
watch(
  () => themeStore.theme,
  (newTheme) => {
    document.documentElement.classList.toggle("dark", newTheme === "dark");
  },
  { immediate: true },
);

onMounted(() => {
  // 确保挂载时同步主题状态
  document.documentElement.classList.toggle("dark", isDark.value);
  fetchUserInfo();
});

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    // TODO: 调用获取用户信息的 API
    // const { data } = await getUserInfo()
    // userInfo.value = data

    // 模拟数据
    userInfo.value = {
      ...userInfo.value,
      username: "hotel_admin",
      hotelName: "贵港大酒店",
      avatar: "https://placeholder.co/400",
      coverImage: "https://placeholder.co/1920x400",
      phone: "13800138000",
      email: "hotel@example.com",
      bio: "贵港市最具特色的商务酒店，提供优质的住宿和会议服务。",
      location: ["guangxi", "guigang", "gangbei"],
      address: "贵港市港北区市中心广场1号",
      tags: ["商务酒店", "会议室", "WiFi覆盖", "免费停车"],
      images: [
        { url: "https://placeholder.co/400" },
        { url: "https://placeholder.co/400" },
        { url: "https://placeholder.co/400" },
        { url: "https://placeholder.co/400" },
      ],
      createTime: "2023-01-01 12:00:00",
      lastLoginTime: "2024-03-15 15:30:00",
    };
  } catch (error) {
    ElMessage.error("获取用户信息失败");
  }
};

// 更新头像
const handleUpdateAvatar = () => {
  avatarDialogVisible.value = true;
};

// 更新封面
const handleUpdateCover = () => {
  coverEditorVisible.value = true;
};

// 封面图片编辑确认
const handleCoverConfirm = async (result) => {
  try {
    const { url } = result;
    userInfo.value.coverImage = url;
    ElMessage.success("封面更新成功");
  } catch (error) {
    ElMessage.error("封面更新失败");
  }
};

// 头像上传前的验证
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === "image/jpeg" || file.type === "image/png";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error("头像只能是 JPG 或 PNG 格式!");
  }
  if (!isLt2M) {
    ElMessage.error("头像大小不能超过 2MB!");
  }
  return isJPG && isLt2M;
};

// 头像上传成功
const handleAvatarSuccess = (res, file) => {
  tempAvatar.value = URL.createObjectURL(file.raw);
};

// 确认更新头像
const confirmUpdateAvatar = () => {
  if (tempAvatar.value) {
    userInfo.value.avatar = tempAvatar.value;
    avatarDialogVisible.value = false;
    ElMessage.success("头像更新成功");
  }
};

// 添加酒店图片
const handleAddImages = () => {
  imageDialogVisible.value = true;
};

// 图片上传成功
const handleImageSuccess = (res, file) => {
  userInfo.value.images.push({
    url: URL.createObjectURL(file.raw),
  });
};

// 确认添加图片
const confirmAddImages = () => {
  imageDialogVisible.value = false;
  ElMessage.success("图片添加成功");
};

// 删除图片
const handleRemoveImage = (index) => {
  userInfo.value.images.splice(index, 1);
};

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;

  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // TODO: 调用更新用户信息的 API
        // await updateUserInfo(userInfo.value)
        ElMessage.success("保存成功");
      } catch (error) {
        ElMessage.error("保存失败");
      }
    }
  });
};

// 重置表单
const resetForm = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return "暂无";
  return new Date(date).toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
};
</script>

<style scoped>
.hotel-admin-profile {
  min-height: 100vh;
  width: 100%;
  transition: background-color 0.3s ease;
}

/* 暗色模式基础样式 */
:deep([class*="dark"]) .text-gray-500,
:deep([class*="dark"]) .text-sm.text-gray-500 {
  color: #e5e7eb !important;
}

:deep([class*="dark"]) .font-medium,
:deep([class*="dark"]) label.block,
:deep([class*="dark"]) .el-form-item__label {
  color: #e5e7eb;
}

:deep([class*="dark"]) .el-card {
  background-color: #1f2937;
  border-color: #374151;
}

:deep([class*="dark"]) .el-card__header {
  border-bottom-color: #374151;
}

:deep([class*="dark"]) .el-input__inner,
:deep([class*="dark"]) .el-textarea__inner {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

:deep([class*="dark"]) .el-input__inner::placeholder,
:deep([class*="dark"]) .el-textarea__inner::placeholder {
  color: #9ca3af;
}

:deep([class*="dark"]) .el-select__tags {
  background-color: #374151;
}

:deep([class*="dark"]) .el-tag {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

:deep([class*="dark"]) .bg-gray-50 {
  background-color: #374151;
}

:deep([class*="dark"]) .el-form-item.is-required .el-form-item__label:before {
  color: #f56c6c;
}

:deep([class*="dark"]) .el-cascader__dropdown,
:deep([class*="dark"]) .el-select__dropdown {
  background-color: #1f2937;
  border-color: #374151;
}

:deep([class*="dark"]) .el-cascader-node__label,
:deep([class*="dark"]) .el-select-dropdown__item {
  color: #e5e7eb;
}

:deep([class*="dark"]) .el-cascader-node:not(.is-disabled):hover,
:deep([class*="dark"]) .el-select-dropdown__item.hover {
  background-color: #374151;
}

/* 统计卡片样式 */
:deep([class*="dark"]) .text-primary-500 {
  color: #60a5fa !important;
}

/* 按钮样式 */
:deep([class*="dark"]) .btn-cover {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

:deep([class*="dark"]) .btn-cover:hover {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 对话框样式 */
:deep([class*="dark"]) .el-dialog {
  background-color: #1f2937;
  border-color: #374151;
}

:deep([class*="dark"]) .el-dialog__title {
  color: #e5e7eb;
}

:deep([class*="dark"]) .el-dialog__body {
  color: #e5e7eb;
}

/* 上传组件样式 */
:deep([class*="dark"]) .el-upload {
  border-color: #4b5563 !important;
}

:deep([class*="dark"]) .el-upload:hover {
  border-color: #60a5fa !important;
}

:deep([class*="dark"]) .el-upload-list__item {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

/* 其他原有样式保持不变 */
.profile-header {
  position: relative;
  overflow: hidden;
  margin: 16px auto;
  width: 100%;
  max-width: 1280px;
  padding: 0;
}

.header-content {
  margin: 0 24px;
  background-color: var(--el-bg-color);
  box-shadow: var(--el-box-shadow-light);
}

.header-bg {
  position: absolute;
  inset: 0;
  height: 160px;
  background-color: #f3f4f6;
  transition: all 0.3s ease;
  filter: brightness(0.8);
  z-index: 1;
}

.header-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.5)
  );
  z-index: 2;
}

@media (max-width: 1320px) {
  .profile-header {
    margin: 16px;
    width: calc(100% - 32px);
  }

  .header-content {
    margin: 0 16px;
  }
}

@media (max-width: 768px) {
  .profile-header {
    margin: 12px;
    width: calc(100% - 24px);
  }

  .header-content {
    margin: 0 12px;
  }

  .profile-header .flex-wrap {
    flex-direction: column;
    text-align: center;
  }

  .profile-header .ml-4 {
    margin-left: 0;
    margin-top: 1rem;
  }

  .profile-header .absolute.right-4 {
    right: 0.75rem;
  }
}

@media (max-width: 480px) {
  .profile-header {
    margin: 8px;
    width: calc(100% - 16px);
  }

  .header-content {
    margin: 0 8px;
  }

  .header-bg {
    height: 140px;
  }

  .profile-header .el-avatar {
    width: 80px;
    height: 80px;
  }

  .profile-header .text-2xl {
    font-size: 1.5rem;
  }
}

/* 按钮样式优化 */
.btn-action,
.btn-cover {
  position: relative;
  z-index: 20;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.btn-action:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-cover:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

/* 按钮组样式 */
:deep(.el-button-group .el-button) {
  border-radius: 4px;
  margin-right: 1px;
}

:deep(.el-button-group .el-button:first-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

:deep(.el-button-group .el-button:last-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-right: 0;
}

/* 暗色模式按钮样式 */
:deep(.dark .btn-cover) {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

:deep(.dark .btn-cover:hover) {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 按钮动画效果 */
@keyframes button-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.btn-cover:active {
  animation: button-pulse 0.3s;
  transform: scale(0.95);
}

.update-avatar-btn {
  background-color: rgba(0, 0, 0, 0.6);
  border: none;
}

.avatar-uploader {
  text-align: center;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar-preview {
  width: 178px;
  height: 178px;
  display: block;
}

.image-uploader :deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.text-primary-500 {
  color: var(--el-color-primary);
}

:deep(.dark .el-card) {
  background-color: #1f2937;
  border-color: #374151;
}

:deep(.dark .el-input__inner) {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

:deep(.dark .el-input__inner::placeholder) {
  color: #9ca3af;
}

:deep(.dark .el-select__tags) {
  background-color: #374151;
}

:deep(.dark .el-tag) {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

/* 暗色模式文本颜色 */
:deep(.dark .text-gray-500),
:deep(.dark .text-sm.text-gray-500) {
  color: #e5e7eb !important;
}

:deep(.dark .font-medium),
:deep(.dark label.block),
:deep(.dark .el-form-item__label) {
  color: #e5e7eb;
}

:deep(.dark .el-card__header) {
  border-bottom-color: #374151;
}

:deep(.dark .bg-gray-50) {
  background-color: #374151;
}

:deep(.dark .el-form-item.is-required .el-form-item__label:before) {
  color: #f56c6c;
}

:deep(.dark .el-textarea__inner) {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

:deep(.dark .el-textarea__inner::placeholder) {
  color: #9ca3af;
}

:deep(.dark .el-cascader__dropdown) {
  background-color: #1f2937;
  border-color: #374151;
}

:deep(.dark .el-cascader-node__label) {
  color: #e5e7eb;
}

:deep(.dark .el-cascader-node:not(.is-disabled):hover) {
  background-color: #374151;
}

:deep(.dark .el-select__dropdown) {
  background-color: #1f2937;
  border-color: #374151;
}

:deep(.dark .el-select-dropdown__item) {
  color: #e5e7eb;
}

:deep(.dark .el-select-dropdown__item.hover) {
  background-color: #374151;
}
</style>
